<template>
    <div class="modal-wrap">
        <div class="modal-box" :style="styleObject">
            <div class="header">
                <slot name="header">
                    <span data-cursor @click="$parent.modal = ''"></span>
                </slot>
            </div>
            <div class="body">
                <slot name="body">
                    {{ content }}
                </slot>
            </div>
            <div class="footer" v-if="hasBtn">
                <slot name="footer">
                    <span data-cursor  @click="$parent.modal = ''">确认</span>
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            content: null,
            hasBtn: {
                type: Boolean,
                default: true
            },
            styleObject: Object
        },
        data () {
            return {
                top: null
            }
        },
        mounted() {
            this.top = document.body.scrollTop || document.documentElement.scrollTop;
            document.documentElement.classList.add('over-hidden');
            document.body.classList.add('over-hidden');
        },
        beforeDestroy() {
            document.documentElement.classList.remove('over-hidden');
            document.body.classList.remove('over-hidden');
            document.body.scrollTop = this.top;
        }
    }
</script>

<style lang="scss" scoped type="text/css">
    @import "../../../assets/css/utils";

    .modal-wrap {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 301;
        background: rgba(0, 0, 0, 0.7);
    }
    .modal-box {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 300;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 550px;
        //min-height: 200px;
        background: #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        overflow: hidden;
        -webkit-transform-origin:top left;
        -moz-transform-origin:top left;
        transform-origin:top left;
        -webkit-animation: fadeScale .2s linear 1;
        animation: fadeScale .2s linear 1;
    }
    .header {
        position: relative;
        height: 30px;/*no*/
        >span {
            position:absolute;
            top: 30px;
            right: 20px;
            width: 30px;
            height: 30px;
            @include bg-img('../../../assets/images/common/close-popups_icon');
        }
    }
    .body {
        padding: 0 40px;
        min-height: 50px;/*no*/
        font-size: 24px;
        text-align: center;
    }
    .footer {
        height: 40px;/*no*/
        line-height: 40px;/*no*/
        text-align: center;
        font-size: 24px;
        color: #fff;
        background-color: #409eff;
        >span {
            display: block;
        }
    }
    input {
        font-size: 24px;
        text-indent: 20px;
    }
    @keyframes fadeScale {
        from {
            opacity: 0;
            -webkit-transform: scale(0) translate(-50%, -50%);
            -moz-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
        }
        to {
            opacity: 1;
            -webkit-transform: scale(1) translate(-50%, -50%);
            -moz-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
        }
    }
</style>